<template>
  <div class="productList">
    <van-dropdown-menu>
      <van-dropdown-item v-model="type" :options="option1" @change="getSearch({page:1, type })" />
    </van-dropdown-menu>
    <itemProduct :list="list" :loading="loading" :finished="finished" @load="onLoad" />
  </div>

</template>

<script>
// api
import { productSearch } from '@/api/miva'
// item
import itemProduct from '@/components/item/item-product-list'
export default {
  components: { itemProduct },
  data() {
    return {
      kw: '',
      list: [],
      loading: false,
      finished: false,
      page: 0,
      type: 1,
      option1: [
        { text: '销量', value: 1 },
        { text: '新品', value: 2 },
        { text: '价格由低到高', value: 3 },
        { text: '价格由高到低', value: 4 }
      ]
    }
  },
  async mounted() {
    await this.getParams()
  },
  methods: {
    // 获取参数
    async getParams() {
      const { query: { kw }} = this.$route
      this.kw = kw
    },
    // 调用搜索接口
    async getSearch({ page, type, reset = true }) {
      console.log(page)
      const { data: { data = [] } = {}} = await productSearch({
        name: this.kw,
        type: this.type,
        page
      })
      if (data.length === 0) {
        this.finished = true
        console.log('没有更多数据了')
        return
      }
      if (reset) {
        this.list = data
        console.log('重写数据列表')
      } else {
        this.list = [...this.list, ...data]
        console.log('扩充数据列表')
      }
      console.log(this.list)
    },
    async onLoad() {
      this.loading = true
      this.page++
      await this.getSearch({ page: this.page, reset: false })
      this.loading = false
    }
  }
}
</script>

<style lang="less">
.productList {
  width: 100%;
}
</style>
